<template>
  <div :style="'width:' + mapWidth + ';height:' + mapHeight">
    <div id="map" v-show="!isShowMap"></div>
    <indexMap v-show="isShowMap" />
  </div>
</template>
<script setup>
import * as echarts from 'echarts'
import './bjMap'
import { chartMap } from './map' // 地图
import {
  onMounted,
  ref,
  watch,
  onBeforeUnmount,
  onBeforeMount,
  onUnmounted,
} from 'vue'
import { useRouter } from 'vue-router'
import { getBaseInfoMapData, getBaseInfoMapData1 } from '@/api/index.js'
import indexMap from './indexMap.vue'
let myCharts = null
const emits = defineEmits(['quCurrentClick', 'backMapFn'])
const router = useRouter()
const props = defineProps({
  mapWidth: {
    type: String,
    default: 'calc(100vw - 50vw)',
  },
  mapHeight: {
    type: String,
    default: '56vh',
  },
  mapParams: {
    type: Object,
    default: () => {},
  },
  mapData: {
    type: Array,
    default: () => [
      { name: '东城区', value: 70, value1: 420 },
      { name: '西城区', value: 60, value1: 550 },
      { name: '朝阳区', value: 50, value1: 630 },
      { name: '丰台区', value: 40, value1: 720 },
      { name: '石景山区', value: 30, value1: 810 },
      { name: '海淀区', value: 80, value1: 80 },
      { name: '门头沟区', value: 25, value1: 860 },
      { name: '房山区', value: 35, value1: 760 },
      { name: '通州区', value: 45, value1: 660 },
      { name: '顺义区', value: 55, value1: 560 },
      { name: '昌平区', value: 65, value1: 470 },
      { name: '大兴区', value: 75, value1: 370 },
      { name: '怀柔区', value: 20, value1: 910 },
      { name: '平谷区', value: 15, value1: 960 },
      { name: '密云区', value: 10, value1: 1010 },
      { name: '延庆区', value: 5, value1: 1060 },
    ],
  },
})
const initMap = () => {
  let chart = document.getElementById('map')
  chart.removeAttribute('_echarts_instance_')
  myCharts = echarts.init(chart)
  upDateMap()
  myCharts.on('click', handleClick)
}

const upDateMap = () => {
  chartMap.tooltip.formatter = function (params) {
    const { data } = params
    let content = ``
    // <p>区县名称：${data?.name || '--'}</p>
    content = `<div>
              <p>房屋总数：${data?.zcount || 0}</p>
              <p>自查房屋数量：${data?.zccount || 0}</p>
              <p>自查隐患数量：${data?.yhcount || 0}</p>
              <p>自查整改数量：${data?.zgcount || 0}</p>
              <p>自查率：${data?.value || 0}%</p>
            </div>
           `
    return content
  }
  // 更新地图数据
  chartMap.series[0].data = mapData.value
  // 配置图例标题
  chartMap.visualMap.text = [`进度比例`]
  console.log(chartMap, 'chartmap')
  // 导入配置项
  myCharts.setOption(chartMap, true)
  window.addEventListener('resize', function () {
    myCharts.resize()
    // upDateMap()
  })
}
const isShowMap = ref(false)
const mapData = ref([])
const handleClick = (params) => {
  // const router = useRouter(); // Vue 3.x 中的组合式 API
  const xzqdm = params.data.code
  // 解析目标路由
  const routeData = router.resolve({
    path: '/indexmap',
    // 或者使用命名路由：
    // name: 'IndexMap',
    // params: { xzqdm:'110000' },
    query: { xzqdm: xzqdm }, // 使用 query 传参
  })

  // 在新标签页中打开解析得到的 URL
  window.open(routeData.href, '_blank')
  // isShowMap.value = !isShowMap.value
  // emits('quCurrentClick', params)
  // currentXzqdm.value = params.data.code
  // iframeSrc.value = `http://39.103.152.237:8080/map/index.html?xzqdm=${currentXzqdm.value}`
  // currentQu.value = params.name
}
watch(
  // () =>mapData,
  // () => {
  //   // 当 props.mapData 变化时，触发更新地图数据
  //   // upDateMap()
  //   console.log('@props.mapData', mapData)
  //   initMap()
  // }
  mapData,
  (newValue, oldValue) => {
    initMap()
  }
)
watch(
  () => props.mapParams,
  (newMapParams, oldMapParams) => {
    if (newMapParams) {
      _getMapDataList() // 请求接口
    }
  },
  { deep: true } // 如果需要监听深层变化
)

const _getMapDataList = async () => {
  let res = await getBaseInfoMapData1(props.mapParams)
  let list = res.data.data
  let arr = list.map((obj) => ({
    ...obj, // 保留原有的所有属性
    name: obj.xzq, // 添加新的 name 字段
    code: obj.xzqdm, // 添加新的 code 字段
    value: parseFloat(obj.zcl.replace('%', '')), // 将 zcl 转为数字类型并作为 value
  }))
  const staticEntries = [
    {
      xzq: '东城区',
      xzqdm: '0',
      zcount: 0,
      zccount: 0,
      zcl: '0%',
      wzccount: 0,
      yhcount: 0,
      zgcount: 0,
      syyhcount: 0,
      name: '东城区',
      code: '110101',
      value: 0,
    },
    {
      xzq: '西城区',
      xzqdm: '0',
      zcount: 0,
      zccount: 0,
      zcl: '0%',
      wzccount: 0,
      yhcount: 0,
      zgcount: 0,
      syyhcount: 0,
      name: '西城区',
      code: '110102',
      value: 0,
    },
  ]
  // 合并原始数据和静态数据
  arr = arr.concat(staticEntries)
  mapData.value = arr
}

const task10Min = setInterval(function () {
  _getMapDataList()
}, 600000)
onMounted(() => {})
onUnmounted(() => {
  clearInterval(task10Min)
})
</script>
<style scoped>
#map {
  width: 100% !important;
  height: 100% !important;
}

#map div {
  padding: 0 !important;
  border: #fff !important;
  background-color: transparent !important;
}
#map1 {
  width: 100% !important;
  height: 100% !important;
}
#map1 div {
  width: 100% !important;
  height: 100% !important;
}
</style>
